<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div id="box" style="width: 100px;height: 100px;background: red;position: absolute;"></div>
</body>
<script>
    //案例演示1：当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false
    // window.onkeydown=function(event){
    //     if(event.keyCode=65){
    //         console.log(true)
    //     }else{
    //         console.log(false)
    //     }
    // }
    //案例演示2：使div可以根据不同的方向键向不同的方向移动
    var box = document.getElementById("box");
    window.onkeydown=function(event){
        var speed=10
        switch(event.keyCode){
            case 37:
                box.style.left=box.offsetLeft-speed+"px";
                break;
            case 39:
                box.style.left=box.offsetLeft+speed+"px";
                break;
            case 38:
                box.style.top=box.offsetTop-speed+"px" ;
                break;
            case 40:      
                box.style.top=box.offsetTop+speed+"px" ; 
                break;
        }
    
    }
</script>
</html>